<template>
  <div class="basic-line-chart">
    <div id="echart6" class="account-display-echart" ref="myChart"></div>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'BasicLineChart',
    data () {
      return {
        initEchart: '',
        list: [],
        isData: true,
        option: {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '6%',
            right: '4%',
            bottom: '3%',
            width: '500',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          series: [
            {
              name: '今日参与粉丝',
              type: 'line',
              data: []
            }
          ]
        }
      }
    },
    methods: {
      init (res) {
        let list = []
        const self = this
        list = res.basicLineList.map(item => {
          return {
            ...item,
            reportTime: self.$Utils.getTimeFormat(item.reportTime).substring(0, 10)
          }
        })
        const initNum = list.length ? 1 : 0
        const today = moment()
        const length = list.length
        for (let i = initNum; i < 7 - length; i++) {
          if (list.length < 7) {
            list.unshift({ joinCount: 0, reportTime: today.subtract(i, 'days').format('YYYY-MM-DD') })
          }
        }

        this.formatData(list)
        this.initEchart = 'init'
        const myChart = window.echarts.init(this.$refs.myChart, 'walden')
        myChart.setOption(this.option)
      },
      formatData (list) {
        if (this.initEchart) {
          this.option.xAxis.data = []
          this.option.series.forEach(item => {
            if (item.data.length > 0) {
              item.data = []
            }
          })
        }
        list.forEach(item => {
          this.option.series[0].data.push(item.joinCount)
          this.option.xAxis.data.push(item.reportTime)
        })
      }
    }
  }
</script>

<style lang="less">
  .basic-line-chart {
    padding: 0 20px;
    height: 340px;
    min-width: 600px;
    background: white;

    .basic-line-chart-title-no-data {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #909399;
    }

    .account-display-echart {
      width: 600px;
      min-height: 250px;
    }
  }
</style>
